<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <!-- 在使用子组件的时候，为子组件赋值属性，优先给子组件的props成员赋值，如果props中没有对应的设置，那么就直接给组件的根元素赋值 -->
      <!-- <hminput placeholder='用户名 / 手机号码'
               :value='user.username'
               @input='handler'></hminput> -->
      <hminput placeholder='用户名 / 手机号码'
               v-model='user.username'
               :rules='/^1\d{10}$|^1\d{4}$/'
               msg='手机号输入不合法'></hminput>
      <!-- v-model
               1.为元素的value属性赋值
               2.监听子组件发出的input事件 -->
      <hminput v-model="user.password"></hminput>
    </div>
    <p class="tips">
      没有账号？
      <a href="#/register"
         class="">去注册</a>
    </p>
    <hmbotton type='danger'
              @click="login">
      <span class="iconfont iconshoucang"></span>
      <span>登陆</span>
    </hmbotton>
  </div>
</template>

<script>
// 引入组件
import hmbotton from '@/components/hmbutton.vue'
import hminput from '@/components/hminput.vue'

// 引入登陆方法
import { userlogin } from '@/apis/user.js'

export default {
  // 注册引入的组件
  components: {
    hmbotton, hminput
  },
  data () {
    return {
      user: {
        username: '13800138000',
        password: '123'
      }
    }
  },
  methods: {
    // async标记当前的方法是异步方法
    async login (e) {
      if (/^1\d{10}$|^1\d{4}$/.test(this.user.username) && /^.{3,}$/.test(this.user.password)) {
        // await:等待，它可以实现   先等待异步操作执行完毕，再继续后面的代码的执行
        // 它可以获取then中的回调参数，并返回
        // await必须保证它所在的函数是async函数
        // 这两个关键字的组合，可以以同步的方式调用异步方法
        // userlogin(this.user)
        // .then((res)=>{zz

        // })
        // .catch(err=>{

        // })
        try { // 尝试执行的代码，如果没有错误就执行完try结构中的代码块
          let res = await userlogin(this.user)
          console.log('----', res);
          if (res.data.statusCode == 200) {
            this.$toast(res.data.message)
            // 将后台返回的token存储到本地存储
            localStorage.setItem('toutiao_59_token', res.data.data.token)
            // 将用户信息存储到本地存储
            localStorage.setItem('toutiao_59_userinfo', JSON.stringify({ ...this.user, id: res.data.data.user.id }))

            // name=jack&age=20 > {name:'jack',age:20}
            let redirecturl = location.href.split('=')[1]
            console.log(redirecturl);
            // 将url地址解码
            redirecturl = decodeURIComponent(redirecturl)
            console.log(redirecturl, typeof redirecturl);
            // 如果跳转回登陆页的时候没有传递redirecturl,那么它的值默认是undefined字符串
            if (redirecturl && redirecturl !== 'undefined') {
              location.href = redirecturl
              // this.$router.push({ path: redirecturl })
            } else {
              this.$router.push({ path: 'personal/' + res.data.data.user.id })
            }
          }
        }
        catch (err) { // 如果有错就跳转到catch结构执行代码块
          this.$toast('用户名或密码输入不正确，在数据库没有对应的匹配数据')
        }
      } else {
        this.$toast('请输入正确的用户名和密码，还没有去请求')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>